<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>员工管理主页面</title>
        <!-- 这里需要改变,直接用绝对路径-->
        <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
        <style>
            body{margin: 10px;}
            .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
            .myfooter{
                width: 100%;
                height: 320px;
            <%--background-image: url("${pageContext.request.contextPath}/images/main_footer.png");--%>
                background: url("${pageContext.request.contextPath}/images/main_footer.png") fixed;
            }
        </style>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/mymain.css" type="text/css">
        <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <div id="mydiv" style="text-align: center">
            <p>Welcome To Employee Management Page</p>
            <hr/>
            <div id="myedit" style="float:left;background-color: #92B8B1;margin-top: -12px" >
                <button class="layui-btn layui-btn-normal" onclick="edit()">✎文本编辑器</button>
            </div>
            <div id="mysearch" style="margin-top:-2px;text-shadow: 1px 2px rosybrown;height:30px;background-color:rosybrown;float:right;text-align: center;font-size: 15px;  border-radius: 10px">
                <button onclick="search()" style="text-shadow: 2px 2px #92B8B1; margin-top:-20px;width: 180px;height:37px;border:1px;border-radius: 10px">
                    ✪ 查询员工</button>
            </div>
        </div>


        <script>
            function edit(){
                window.location="${pageContext.request.contextPath}/user/editor";
            }
            function search() {
                window.open("${pageContext.request.contextPath}/user/search");
            }
        </script>

        <!-- 注意table是一张表-->
        <table class="layui-hide" id="demo" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
        </script>
        <%-- 设置背景图片,url 参数不加 "" 双引号--%>
        <div class="myfooter" style="height: 320px">

        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this">演示说明</li>
                <li>日期</li>
                <li>分页</li>
                <li>上传</li>
                <li>滑块</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-carousel" id="test1">
                        <div carousel-item>
                            <div><p class="layui-bg-green demo-carousel">在这里，你将以最直观的形式体验 layui！</p></div>
                            <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>
                            <div><p class="layui-bg-blue demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>
                            <div><p class="layui-bg-orange demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>
                            <div><p class="layui-bg-cyan demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div id="laydateDemo"></div>
                </div>
                <div class="layui-tab-item">
                    <div id="pageDemo"></div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-upload-drag" id="uploadDemo">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div class="layui-hide" id="uploadDemoView">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="max-width: 100%">
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div id="sliderDemo" style="margin: 50px 20px;"></div>
                </div>
            </div>
        </div>

        <blockquote class="layui-elem-quote layui-hide layui-text" id="footer">当前版本：layui v{{ layui.v }}</blockquote>


        <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
        <script>
            layui.config({
                version: '1623988781489' //为了更新 js 缓存，可忽略
            });

            //加载模块
            layui.use(function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                //得到各种内置组件
                var layer = layui.layer //弹层
                    ,laypage = layui.laypage //分页
                    ,laydate = layui.laydate //日期
                    ,table = layui.table //表格
                    ,carousel = layui.carousel //轮播
                    ,upload = layui.upload //上传
                    ,element = layui.element //元素操作
                    ,slider = layui.slider //滑块
                    ,dropdown = layui.dropdown //下拉菜单
                //监听Tab切换
                element.on('tab(demo)', function(data){
                    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                        tips: 1
                    });
                });
                // 做一个异步请求
                <%--$.ajax({--%>
                <%--    url: '${pageContext.request.contextPath}/emp/getAll',--%>
                <%--    type: 'post',--%>
                <%--    dataType: 'json',--%>
                <%--    success:function (param) {--%>
                <%--        table.render({--%>
                <%--            //#demo（这个不需要更改）说明有一个元素是的id叫做demo，下面url需要更改--%>
                <%--            elem: '#demo'--%>
                <%--            ,height: 420--%>
                <%--            ,url: '${pageContext.request.contextPath}/emp/getAll' //数据接口--%>
                <%--            ,title: '用户表'--%>
                <%--            ,page: true //开启分页--%>
                <%--            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档--%>
                <%--            ,totalRow: true //开启合计行--%>
                <%--            ,cols: [[ //表头--%>
                <%--                {type: 'checkbox', fixed: 'left'}--%>
                <%--                ,{field: 'empno', title: '员工编号', width:150, sort: true, fixed: 'left', totalRowText: '编号：'}--%>
                <%--                ,{field: 'ename', title: '员工姓名', width:150}--%>
                <%--                ,{field: 'job', title: '员工职位', width: 150, sort: true, totalRow: true}--%>
                <%--                ,{field: 'mgr', title: '上司编号', width: 150,sort: true}--%>
                <%--                ,{field: 'sal', title: '员工薪资', width:150, sort: true}--%>
                <%--                ,{field: 'hiredate', title: '入职日期', width: 180, sort: true}--%>
                <%--                ,{field: 'comm', title: '年终奖金', width: 150, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 元'}--%>
                <%--                ,{field: 'deptno', title: '部门编号', width:150}--%>
                <%--                ,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}--%>
                <%--            ]]--%>
                <%--        });--%>
                <%--    }--%>
                <%-- });--%>
                //执行一个 table 实例
                table.render({
                    //#demo（这个不需要更改）说明有一个元素是的id叫做demo，下面url需要更改
                    elem: '#demo'
                    ,height: 420
                    ,url: '${pageContext.request.contextPath}/emp/getAll' //数据接口
                    ,title: '用户表'
                    ,page: true //开启分页
                    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    ,totalRow: true //开启合计行
                    ,cols: [[ //表头
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'empno', title: '员工编号', width:150, sort: true, fixed: 'left', totalRowText: '编号：'}
                        ,{field: 'ename', title: '员工姓名', width:150}
                        ,{field: 'job', title: '员工职位', width: 150, sort: true, totalRow: true}
                        ,{field: 'mgr', title: '上司编号', width: 150,sort: true}
                        ,{field: 'sal', title: '员工薪资', width:150, sort: true}
                        ,{field: 'hiredate', title: '入职日期', width: 180, sort: true}
                        ,{field: 'comm', title: '年终奖金', width: 150, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 元'}
                        ,{field: 'deptno', title: '部门编号', width:150}
                        ,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}
                    ]]
                });
                //监听头工具栏事件
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id)
                        ,data = checkStatus.data; //获取选中的数据
                    switch(obj.event){
                        case 'add':
                            // 以下标签，需要改成跳转页面
                            window.location="${pageContext.request.contextPath}/user/add";
                            break;
                        case 'update':
                            if(data.length === 0){
                                layer.msg('请选择一行');
                            } else if(data.length > 1){
                                layer.msg('只能同时编辑一个');
                            } else {
                                layer.alert('编辑的id: '+ checkStatus.data[0].empno);
                            //在这里，进行页面跳转
                            //注意 不使用window.location (在当前页面打开，而是用open 打开一个新的页面)
                                window.open("${pageContext.request.contextPath}/user/edit");
                            }
                            break;
                        case 'delete':
                            if(data.length === 0){
                                layer.msg('请选择一行');
                            } else {
                                layer.msg('删除成功');
                                // 让userController中的delete方法，进行删除
                            }
                            break;
                    };
                });

                //监听行工具事件
                table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data //获得当前行数据
                        ,layEvent = obj.event; //获得 lay-event 对应的值
                    if(layEvent === 'detail'){
                        layer.msg('查看操作');
                    } else if(layEvent === 'more'){
                        //下拉菜单
                        dropdown.render({
                            elem: this //触发事件的 DOM 对象
                            ,show: true //外部事件触发即显示
                            ,data: [{
                                title: '编辑'
                                ,id: 'edit'
                            },{
                                title: '删除'
                                ,id: 'del'
                            }]
                            ,click: function(menudata){
                                if(menudata.id === 'del'){
                                    layer.confirm('真的删除行么', function(index){
                                        obj.del(); //删除对应行（tr）的DOM结构
                                        layer.close(index);
                                        //向服务端发送删除指令
                                        // 请求删除操作

                                    });
                                    $.ajax({
                                        url: '${pageContext.request.contextPath}/emp/deleteEmp',
                                        data: {
                                            // 前端向后端传递值
                                            empno: data.empno
                                        },
                                        success: function (result) {
                                            if (result == "1") {
                                                layer.msg("删除成功！");
                                                // 刷新页面
                                                window.location.reload();
                                            } else {
                                                layer.msg("删除失败！");
                                            }
                                        }
                                    });
                                } else if(menudata.id === 'edit'){
                                    layer.msg('编辑操作，当前行 ID:'+ data.id);
                                    // 让他同样跳转到编辑页面
                                    window.open("${pageContext.request.contextPath}/user/edit");
                                }
                            }
                            ,align: 'right' //右对齐弹出（v2.6.8 新增）
                            ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                        })
                    }
                });
                //执行一个轮播实例
                carousel.render({
                    elem: '#test1'
                    ,width: '100%' //设置容器宽度
                    ,height: 200
                    ,arrow: 'none' //不显示箭头
                    ,anim: 'fade' //切换动画方式
                });

                //将日期直接嵌套在指定容器中
                var dateIns = laydate.render({
                    elem: '#laydateDemo'
                    ,position: 'static'
                    ,calendar: true //是否开启公历重要节日
                    ,mark: { //标记重要日子
                        '0-10-14': '生日'
                        ,'2020-01-18': '小年'
                        ,'2020-01-24': '除夕'
                        ,'2020-01-25': '春节'
                        ,'2020-02-01': '上班'
                    }
                    ,done: function(value, date, endDate){
                        if(date.year == 2017 && date.month == 11 && date.date == 30){
                            dateIns.hint('一不小心就月底了呢');
                        }
                    }
                    ,change: function(value, date, endDate){
                        layer.msg(value)
                    }
                });

                //分页
                laypage.render({
                    elem: '#pageDemo' //分页容器的id
                    ,count: 1000 //数据总数
                    ,limit: 10 //每页显示的数据条数
                    ,skin: '#1E9FFF' //自定义选中色值
                    //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                    ,jump: function(obj, first){
                        if(!first){
                            layer.msg('第'+ obj.curr + 10 +'页', {offset: 'b'});
                        }
                    }
                });

                //上传
                upload.render({
                    elem: '#uploadDemo'
                    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
                    ,done: function(res){
                        layer.msg('上传成功');
                        layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                        console.log(res)
                    }
                    ,before: function(){
                        layer.msg('上传中', {icon: 16, time: 0});
                    }
                });

                //滑块
                var sliderInst = slider.render({
                    elem: '#sliderDemo'
                    ,input: true //输入框
                });

                //底部信息
                var footerTpl = lay('#footer')[0].innerHTML;
                lay('#footer').html(layui.laytpl(footerTpl).render({}))
                    .removeClass('layui-hide');
            });
        </script>
    </body>
</html>
